<%--
  Created by IntelliJ IDEA.
  User: MY PC
  Date: 2018/11/27
  Time: 14:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="common.jsp" %>
<html>
<head>
    <title>Title</title>
    <script>
        window.onload = function () {
            layui.use('table', function () {
                var table = layui.table;
                var $ = layui.jquery;

                //第一个实例
                var tab = table.render({
                    elem: '#demo1111'
                    , height: 500
                    , url: 'getSpecList' //数据接口
                    , page: true //开启分页
                    , id: 'idTest'
                    , cols: [[ //表头
                        {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
                        , {field: 'skuId', title: 'skuId', width: 120, sort: true}
                        , {field: 'ownerId', title: '供应商类型', width: 120, sort: true}
                        , {field: 'name', title: '商品名称', width: 500}
                        , {field: 'prodNo', title: '商品编号', width: 120}
                        , {field: 'sellPrice', title: '售价', width: 120, sort: true}
                        , {field: 'prodStatus', title: '商品状态', width: 120}
                        , {field: 'stock', title: '库存', width: 120}
                        , {field: 'createTime', title: '上架时间', width: 200, sort: true}
                        , {fixed: 'right', width: 200, align: 'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
                    ]
                        // , [
                        //     {field: 'type', title: '类型', width: 80}
                        //     , {field: 'origPrice', title: '原价', width: 120}
                        //     , {field: 'inPrice', title: '进价', width: 300}
                        // ]
                    ]
                    , initSort: {
                        field: 'sellPrice' //排序字段，对应 cols 设定的各字段名
                        , type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
                    }
                    , done: function (res, curr, count) {
                        //如果是异步请求数据方式，res即为你接口返回的信息。
                        //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                        console.log(res);

                        //得到当前页码
                        console.log(curr);

                        //得到数据总量
                        console.log(count);
                    }
                    , text: {
                        none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                    }
                });


                var checkStatus = table.checkStatus('idTest'); //idTest 即为基础参数 id 对应的值
                console.log("idTest : " + checkStatus.data);//获取选中行的数据
                console.log("idTest : " + checkStatus.data.length);//获取选中行数量，可作为是否有选中行的条件
                console.log("idTest : " + checkStatus.isAll); //表格是否全选

                //将上述表格示例导出为 csv 文件
                table.exportFile(tab.config.id, tab.data); //data 为该实例中的任意数量的数据
                // table.exportFile(['名字','性别','年龄'], [
                //     ['张三','男','20'],
                //     ['李四','女','18'],
                //     ['王五','女','19']
                // ], 'csv'); //默认导出 csv，也可以为：xls

                //监听工具条
                table.on('tool(te222212st)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                    var data = obj.data; //获得当前行数据
                    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                    var tr = obj.tr; //获得当前行 tr 的DOM对象
                    console.log(obj.data)
                    if (layEvent === 'detail') { //查看
                        //do somehing
                        layer.alert("查看查看")
                    } else if (layEvent === 'del') { //删除
                        layer.confirm('真的删除行么', function (index) {
                            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            layer.close(index);
                            //向服务端发送删除指令
                        });
                    } else if (layEvent === 'edit') { //编辑
                        //do something
                        layer.alert("编辑编辑")
                        //同步更新缓存对应的值
                        obj.update({
                            skuId: '123'
                            , name: 'zyb'
                        });
                    }
                });

                //监听行单击事件
                table.on('row(te222212st)', function(obj){
                    console.log(obj.tr) //得到当前行元素对象
                    console.log(obj.data) //得到当前行数据
                    //obj.del(); //删除当前行
                    //obj.update(fields) //修改当前行数据
                });

                //监听行双击事件
                table.on('rowDouble(te222212st)', function(obj){
                    //obj 同上
                });

                //转换静态表格
                table.init('demo', {
                    height: 315 //设置高度
                    , limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
                    //支持所有基础参数
                });
            });
        }
    </script>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
</head>
<body>
<div>
    <table id="demo1111" lay-filter="te222212st"></table>
    <hr class="layui-bg-orange">

    <table class="layui-table" lay-data="{height:315, url:'getSpecList', page:true, id:'tes111t'}" lay-filter="t222est">
        <thead>
        <tr>
            <th lay-data="{field:'id', width:80, sort: true}">ID</th>
            <th lay-data="{field:'name', width:80}">用户名</th>
            <th lay-data="{field:'skuId', width:80, sort: true}">skuId</th>
            <th lay-data="{field:'prodStatus'}">商品状态</th>
            <th lay-data="{field:'sign'}">签名</th>
            <th lay-data="{field:'experience', sort: true}">积分</th>
            <th lay-data="{field:'score', sort: true}">评分</th>
            <th lay-data="{field:'classify'}">职业</th>
            <th lay-data="{field:'wealth', sort: true}">财富</th>
        </tr>
        </thead>
    </table>
    <hr class="layui-bg-orange">

    <table lay-filter="demo">
        <thead>
        <tr>
            <th lay-data="{field:'username', width:100}">昵称</th>
            <th lay-data="{field:'experience', width:80, sort:true}">积分</th>
            <th lay-data="{field:'sign'}">签名</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>贤心1</td>
            <td>66</td>
            <td>人生就像是一场修行a</td>
        </tr>
        <tr>
            <td>贤心2</td>
            <td>88</td>
            <td>人生就像是一场修行b</td>
        </tr>
        <tr>
            <td>贤心3</td>
            <td>33</td>
            <td>人生就像是一场修行c</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>
